<!--友情链接-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/personal_center.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <!--<link rel="stylesheet" href="../less/laypage.css">-->
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=4&y=3" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form" id="vue-box" v-cloak>
        <div class="friend-tips">
            <div class="title-box"><i class="icon-sty"></i><b class="title-tip">温馨提示</b></div>
            <div class="info-list">您可以将其他公司网站或者常用网站加入到网站友情链接</div>
        </div>
        <div class="content-admin">
            <div class="title-toggle">
                <div class="item active">友情链接</div>
            </div>
            <div>
                <div class="operation-title">
                    <span class="btn-sty11 mr-15 js-showModal" style="line-height: 39px" >添加链接</span>
                    <span class="btn-sty22 mr-15 js-allDel">批量删除</span>
                </div>
                <div class="table-list">
                    <table>
                        <thead>
                        <tr>
                            <th class="js-allCheck width_80">
                                <input type="checkbox" id="checkAll" name="" title="全选" lay-skin="primary" lay-filter="checkAll">
                            </th>
                            <th>友情链接名称</th>
                            <th>网址</th>
                            <!--<th>品类</th>-->
                            <th class="width_170">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in pagList">
                            <td class="js-onlyCheck"><input type="checkbox" :id="item.id" name="" lay-skin="primary" lay-filter="checkIt"></td>
                            <td>{{item.title}}</td>
                            <td>{{item.content}}</td>
                            <!--<td>完成</td>-->
                            <td>
                                <div>
                                    <div class="btn-fun js-edit" :id="item.id" @click="edit(item.id,item.title,item.content)">修改</div>
                                    <div class="btn-fun js-del" :id="item.id">删除</div>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div id="test1" class="text-r"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="link-modal hide">
    <div class="mask-link js-hideModal"></div>
    <div class="content-link">
        <div class="title">添加友情链接</div>
        <div class="item">
            <span>名称：</span><input type="text" class="layui-input js-linkName">
        </div>
        <div class="item">
            <span>网址：</span><input type="text" class="layui-input js-linkVal">
        </div>
        <div class="clearfix pr20">
            <div class="fr">
                <span class="btn-sty11 mr-20 js-addLink">确认</span>
                <span class="btn-sty11 js-hideModal">取消</span>
            </div>
        </div>
    </div>
</div>

<!--
<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script>
    var postData = {
        limit:5,
        offset:1,
        type:3,
        storeId:localStorage.getItem('storeId')
    }

    var app = new Vue({
        el: '#vue-box',
        data: {
            pagList:'',
            imgBaseUrl: imgBaseUrl,
        },
        mounted:function(){
            this.getPage();
        },
        updated:function () {
            layui.use('form', function(){
                var form = layui.form;
                form.render("checkbox");
            });
        },
        methods:{
            getPage:function(){
                var that = this;
                get_ajaxPage("/cms/getAllNewPage", postData, function (data) {
                    that.pagList = data.data;
                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'test1'
                            ,count: data.count //数据总数，从服务端得到
                            ,limit:postData.limit
                            ,jump: function(obj, first){
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数

                                //首次不执行
                                if(!first){
                                    //do something
                                    postData.offset = obj.curr;
                                    get_ajaxPage("/cms/getAllNewPage", postData, function (data) {
                                        that.pagList = data.data;
                                    })
                                }
                            }
                        });
                    });
                })



            },
            edit:function(id,linkName,linkVal){
                $('.link-modal').removeClass('hide');
                $('.js-linkName').val(linkName);
                $('.js-linkVal').val(linkVal);
                $('.js-addLink').attr('data-id',id)
            }
        }
    });



    layui.use('form', function(){  //2级联动
        var form = layui.form;
        form.render("checkbox");
        form.on('checkbox(checkAll)', function(data){    //layui-触发事件
            var checked = data.elem.checked;
            $("tbody input[type=checkbox]").prop("checked",checked);
            form.render("checkbox");
        });
        form.on('checkbox(checkIt)', function(data){
            var checked = data.elem.checked;
            var allLength = $("tbody input[type=checkbox]").length;
            var checkLength = $("tbody input[type=checkbox]:checked").length;
            $("#checkAll").prop("checked",allLength == checkLength);
            form.render("checkbox");
        });
    });



    $(document).on('click','.js-del',function(){//    删除
        var id = $(this).attr('id');
        get_ajax("/cms/delNewById", {id:id}, function (data) {
            layer.msg('删除成功！');
            app.getPage();
        })

    })

    $('.js-allDel').click(function(){   //批量删除借口报错
        var arr = [];
        $('tbody').find("input[type='checkbox']:checked").each(function(){
            arr.push($(this).attr('id'));
        })
        if(arr.length<1){
            layer.msg('请选择商品')
            return
        }
        var arrStr = String(arr);
        get_ajax("/cms/delNewByIds", {ids:arrStr}, function (data) {
            layer.msg('删除成功！');
            app.getPage();
        })
    })

    $('.js-addLink').click(function(){
        if(!$('.js-linkName').val()){
            layer.msg('名称不能为空！')
            return;
        }
        if(!$('.js-linkVal').val()){
            layer.msg('链接不能为空！')
            return;
        }


        if($(this).attr('data-id')){
            get_ajax("/cms/editNewInfo", {id:$(this).attr('data-id'),picUrl:'',type:3,content:$('.js-linkVal').val(),title:$('.js-linkName').val()}, function (data) {
                $('.link-modal').addClass('hide');
                layer.msg('编辑成功！');
                app.getPage();
            })
        }else{
            get_ajax("/cms/saveNewInfo", {picUrl:'',type:3,content:$('.js-linkVal').val(),title:$('.js-linkName').val()}, function (data) {
                $('.link-modal').addClass('hide');
                layer.msg('新增成功！');
                app.getPage();
            })
        }

    })



//    $(document).on('click','.js-edit',function(){  //去编辑
//        var id = $(this).attr('id');
//        var bread = $(this).attr('bread').replace(/\,/g,">")
//        window.open('release_supply.html?id='+id+'&bread='+bread);
//    })


    $('.js-showModal').click(function(){
        $('.link-modal').removeClass('hide');
    })
    $('.js-hideModal').click(function(){
        $('.link-modal').addClass('hide');
    })

</script>
</body>
</html>
